<template>
	<div class="wy-main user-setting">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >安全设置</span>
					<a-divider class="title-divider" style="margin-bottom: 20px;" />
				</p>
			</a-col>
		</a-row>
		<div class="wy-main-cont user-setting wy-col-00">
			<a-row type="flex" align="middle">
				<a-col  style="text-align: center;">
					<div style="width: 150px; height: 150px;">
						<img style="width: 100%;height:100%;" :src="avatar" alt="">
					</div>
				</a-col>
				<a-col :span="18" style="line-height: 30px; margin-left: 30px;">
					<div>登录名称：{{users.username}} 
						<span style="color: #FF2F47;" class="wy-col-15" v-if="users.attestationStatus==109">【未实名认证】</span>
						<span style="color: #F5B12E;" class="wy-col-15" v-if="users.attestationStatus==110">【正在实名认证审核中】</span>
						<span class="wy-col-15" v-if="users.attestationStatus==111">【您已经通过实名认证】</span>
						<span style="color: #FF2F47;" class="wy-col-15" v-if="users.attestationStatus==112">【实名认证审核失败】</span>
						
						<!--<span style="color: #F5B12E;" class="wy-col-15" v-if="users.approvalStatus==106">【正在实名认证审核中】</span>
						<span class="wy-col-15" v-if="users.approvalStatus==107">【您已经通过实名认证】</span>
						<span style="color: #FF2F47;" class="wy-col-15" v-if="users.approvalStatus==108">【实名认证审核失败】</span>-->
					</div>
					<div>注册时间：{{users.createTime}}</div>
				</a-col>
			</a-row>
			<a-divider style="margin: 20px 0;"/>
			<!--<div class="setting-anquan">
				<span>您当前的账号安全程度</span>
				<i :class="aqStatus"></i>
				<span :class="aqStatus">{{aqStatus==='red'?'低':(aqStatus==='yellow'?'中':'高')}}</span>
			</div>-->
			<div class="wy-m-l-30">
				<!--<a-divider dashed style="margin: 22px 0 20px;" />-->
				<a-row type="flex">
					<a-col class="w_85">登录密码</a-col>
					<a-col :span="18" class="wy-col-66">
						安全性高可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。
					</a-col>
					<a-col class="w_150">
						<a-icon type="info-circle" class="wy-font-18 wy-col-15" />
						<span class="wy-col-15">已设置</span>
						<a class="w_edit" @click="updatePassword">修改</a>
					</a-col>
				</a-row>
				<a-divider dashed style="margin: 20px 0;" />
				<a-row type="flex">
					<a-col class="w_85">手机绑定</a-col>
					<a-col :span="18"  v-if="users.mobile"  class="wy-col-66">
						您已绑定了手机<span class="wy-col-15">{{users.mobile}}</span>[您的手机为安全手机，可以找回密码，但不能用于登录]
					</a-col>
					<a-col v-if="users.mobile?false:true" :span="18" class="wy-col-66">
						您还未绑定手机[您的手机为安全手机，可以找回密码，但不能用于登录]
					</a-col>
					<a-col  class="w_150">
						<a-icon type="info-circle"  v-if="users.mobile"  class="wy-font-18 wy-col-15" />
						<span class="wy-col-15"  v-if="users.mobile" >已设置</span>
						<a-icon type="info-circle" v-if="users.mobile?false:true" style="color:#F5B12E" class="wy-font-18 wy-col-15" />
						<span class="wy-col-15" v-if="users.mobile?false:true" style="color:#F5B12E">未设置</span>
						<router-link disabled style="color: #CCCCCC;" to="/profile" class="w_edit">修改</router-link>
					</a-col>
				</a-row>
				<a-divider dashed style="margin: 20px 0;" />
				<a-row type="flex">
					<a-col class="w_85">备用邮箱</a-col>
					<a-col :span="18" v-if="users.email" class="wy-col-66">
						您已绑定了邮箱<span class="wy-col-15">{{users.email}}</span>[物流云发送的各类系统、推荐、服务通知将发送到您的备用邮箱。]
					</a-col>
					<a-col :span="18" v-if="users.email?false:true" class="wy-col-66">
						您未绑定了邮箱[物流云发送的各类系统、推荐、服务通知将发送到您的备用邮箱。]
					</a-col>
					<a-col class="w_150">
						<a-icon type="info-circle" v-if="users.email" class="wy-font-18 wy-col-15" />
						<span class="wy-col-15" v-if="users.email">已设置</span>
						<a-icon type="info-circle" v-if="users.email?false:true" style="color:#F5B12E" class="wy-font-18 wy-col-15" />
						<span class="wy-col-15" v-if="users.email?false:true" style="color:#F5B12E">未设置</span>
						<router-link to="/user/info" class="w_edit">修改</router-link>
					</a-col>
				</a-row>
				<a-divider dashed style="margin: 20px 0;" />
				<a-row type="flex">
					<a-col class="w_85">注销账号</a-col>
					<a-col :span="18"  class="wy-col-66">
						如果您不再使用此账号，可以将其注销。注销后，其下所有服务、数据及隐私信息将会被删除并将无法恢复<router-link to="">《帮助文档》</router-link>
					</a-col>
					<a-col class="w_150">
						<a style="color:#CCCCCC" @click="logoutClick">注销账号</a>
					</a-col>
				</a-row>
			</div>
		</div>
		<update-password
			@success="handleUpdate"
			@cancel="handleCancelUpdate"
			:user="user"
			:updatePasswordModelVisible="updatePasswordModelVisible">
		</update-password>
		<!--注销账号弹窗-->
		<a-modal title="注销账号" @ok="logoutOk" :visible="logoutShow" @cancel="logoutClose" width="430px" >
			<a-checkbox v-model="logoutCheck">
				请确认是否注销账号
			</a-checkbox>
		</a-modal>
	</div>
</template>
<script>
	import UpdatePassword from './../../personal/UpdatePassword'
	import {mapState} from 'vuex'
	export default {
		components: {UpdatePassword},
		data() {
			return {
				users:'',
				logoutShow: false,
				logoutCheck: false,
				aqStatus: 'red',
				updatePasswordModelVisible: false
			}
		},
		created() {
			this.getUserInfo();
		},
		computed: {
		  ...mapState({
		    multipage: state => state.setting.multipage,
		    user: state => state.account.user,
		  }),
		  avatar () {
		    return `static/avatar/${this.user.avatar}`
		  }
		},
		 watch:{
			'$route.path': function (newVal, oldVal) {
				if (newVal === '/user/setting') {
					this.getUserInfo();
				}
			},
		},
		methods: {
			getUserInfo() {
				this.$get('/userinfo/open/username/'+this.user.username).then((r) => {
					console.log(r,'个人信息')
					this.users = r.data.data
	            }).catch((e) => {})
			},
			logoutOk () {
				console.log('logoutOk::',this.logoutCheck)
				if (!this.logoutCheck) {
					this.$message.error('请勾选是否注销账号')
					return;
				}
				this.$put('/userinfo/',{
					userId: this.user.userId,
					status: '0',
					trade: this.user.trade,
					mainBusiness: this.user.mainBusiness,
					ssex:  this.user.ssex,
					username: this.user.username,
				},true).then((r) => {
					// console.log('news userInfo:',r)
					// this.$router.push('/login')
					window.location.href = environment.LOGIN_URL;
	            }).catch((e) => {})
			},
			logoutClick () {
				this.logoutShow = true;
			},
			logoutClose () {
				this.logoutShow = false;
			},
			updatePassword () {
				this.updatePasswordModelVisible = true
			},
			handleCancelUpdate () {
				this.updatePasswordModelVisible = false
			},
			handleUpdate () {
				this.updatePasswordModelVisible = false
				this.$message.success('更新密码成功，请重新登录系统')
				setTimeout(() => {
					this.logout()
				}, 1500)
			},
		}
	}
</script>

<style lang="less" scoped>
	.user-setting {
		.setting-anquan{
			i{
				width: 90px;
				height: 8px;
				display: inline-block;
				margin: 0 15px;
			}
            i.red{
                background: #FF2F47;
            }
            i.yellow{
                background: #F5B12E;
            }
            i.green{
                background: #15837A;
            }
            span.red{
                color: #FF2F47;
            }
            sapn.yellow{
                color: #F5B12E;
            }
            span.green{
                color: #15837A;
            }
		}
		.anticon{
			margin-right: 4px;
		    position: relative;
		    top: 2px;
		}
		.w_85{ width: 85px; }
		.w_150{ width: 150px; text-align: right;}
		.w_edit{
		    border-left: 1px solid #dddddd;
		    padding-left: 12px;
		    margin-left: 8px;
		    color: #50ACF2 
		}
	}
</style>